<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>hoyo</title>

    <!-- Bootstrap -->
    <link href="/hoyo/css/bootstrap.min.css" rel="stylesheet">
    <link href="/hoyo/css/mine.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    	*{
    		font-family: "Microsoft YaHei";
    	}
    	.data-md-5{
    		width:20%;
    		padding-bottom: 15px;
    		padding-left: 0px;
    	}
    	.data-icon{
    		width: 40px;
    		height: 40px;
    	}
    	.data-font{
    		font-size: 22px;
    		line-height: 50px;
    		height: 50px;
    	}
    	.data-channel-header{
    		height: 50px;
    		margin-bottom: 10px;
    	}
    	.padding-zero{
    		padding: 0;
    	}
    	.data-channel-ranking-header{
    		height: 50px;
    		margin-bottom: 10px;
    	}
    	.data-ranking-nav{
    		list-style: none;
    		padding: 0;
    	}
    	.data-ranking-nav li{
    		list-style: none;
    		display: block;
    		margin-top: 15px;
    	}
    	.data-channel-ranking-content{
    		padding: 0;
    		font-size: 14px;
    	}
    	.data-channel-ranking-header{
    		padding: 0;
    	}
    	.data-ranking-nav li:first-child{
				margin-top: 0px;
    	}
    	.data-ranking-badge{
    		border-radius: 5px;
    		float: left;
    		margin-right: 5px;
    	}
    	.data-ranking-badge-active{
    		background-color: #f25d8e;
    	}
    	.data-ranking-a{
    		display: inline-block;
    		overflow: hidden;
    	}
    	.ranking-second{
    		height: 20px;
    	}
    	.data-channel{
    		margin-bottom:20px;
    	}
    	.container{
    		padding: 0;
    	}
    	.title{
    		height: 20px;
    		overflow: hidden;
    		padding-left: 3px;
    	}
    	.play-number .icon{
				width: 16px; 
   			height: 16px; 
    	}
    	.play-number{
    		display: inline-block;
    		height: 16px;
    	}
    	.info{
    		height: 16px;
    		font-size: 12px;
    	}
    	.play-number .font{
    		padding-left: 3px;
    		line-height: 16px;
    		height: 16px;
    	}
    	.comment-number .icon{
				width: 16px; 
   			height: 16px; 
    	}
    	.comment-number{
    		display: inline-block;
    		height: 16px;
    		float: right;
    	}
    	.comment-number .font{
    		padding-left: 3px;
    		line-height: 16px;
    		height: 16px;
    	}
    	.img-rounded{
    		display: inline-block;
		    max-width: 100%;
		    height: auto;
		    line-height: 1.42857143;
		    background-color: #fff;
		    -webkit-transition: all .2s ease-in-out;
		    -o-transition: all .2s ease-in-out;
		    transition: all .2s ease-in-out;
    	}
    	.sort{
    		height: 48px;
    		line-height: 48px;
    		padding: 10px 0;
    		margin-right: 20px;
    		text-align: center;
    		color: #222222;
    		font-size: 14px;
    		cursor: pointer;
    		font-family: "微软雅黑";
    		box-sizing: border-box;
    	}
    	.header{
    		box-sizing: border-box;
    		margin-bottom: 20px;
    	}
    	.spanon{
    		height: 46px;
    		border-bottom: 2px solid #00A1D6;
    	}
    	.b-head{
    		position: relative;
    		margin-top: 10px;
    	}
    	.b-head-t{
    		vertical-align: middle;
    		display: inline-block;
    		font-size: 18px;
    		font-family: "微软雅黑";
    		line-height: 24px;
    		color: #222222;
    	}
    	.rlist{
    		position: relative;
    		min-height: 455px;
    		margin: 0;
    		padding: 0;
    		padding-top: 20px;
    		list-style-type: none;
    	}
    	.rlist .loaded li{
    		display: block;
    	}
    	.rlist li{
    		margin: 0;
    		padding: 0;
    		list-style-type: none;
    		overflow: hidden;
    		margin-top: 20px;
    		position: relative;
    		padding-left: 25px;
    	}
    	.rlist li:first-child{
    		margin: 0;
    	}
    	.rlist li .number{
    		position: absolute;
    		color: #fff;
    		height: 18px;
    		line-height: 17px;
    		top:0;
    		left:0;
    		font-size: 12px;
    		min-width: 12px;
    		text-align: center;
    		background-color: #b8c0cc;
    		z-index: 20;
    		border-radius: 4px;
    		padding: 0 3px 0 3px;
    		font-weight: bolder;
    		box-sizing: content-box;
    	}
    	.rlist li .n1{
    		background: #f25d8e;
    	}
    	.rlist li.on .preview,.rlist li:hover .preview{
				display: block;
    	}
    	.rlist li .preview{
    		display: none;
    		margin-right: 5px;
    		width:80px;
    		height: 50px;
    		float: left;
    		border-radius: 4px;
    		overflow: hidden;
    	}
    	.rlist li:hover .t{
    		color: #00a1d6;
      	text-decoration: none;
    	}
      a{
      	outline: 0;
      	color: #00a1d6;
      	text-decoration: none;
      	cursor: pointer;
      }
      .rlist li img{
      	display: block;
      	width: 80px;
      	height: 50px;
      	margin: 0 auto;
      	border: 0;
      	vertical-align: middle;
      }
      .rlist li .rl-info{
      	float: left;
      }
      .rlist li.on .t{
      	height: 36px;
      	line-height: 18px;
      	margin-top: -3px;
      	width: 150px;
      	padding: 0;
      	font-size: 12px;
      	font-family: "微软雅黑";
      }
      .rlist li:hover .t{
      	height: 36px;
      	line-height: 18px;
      	margin-top: -3px;
      	width: 150px;
      	padding: 0;
      	font-size: 12px;
      	font-family: "微软雅黑";
      }
      .rlist li .t{
      	line-height: 17px;
      	height: 18px;
      	word-wrap: break-word;
      	word-break: break-all;
      	overflow: hidden;
      	font-size: 12px;
      	font-family: "微软雅黑";
      	color: #222222;
      }
      .rlist li.on .i{
      	display: block;
      }
      .rlist li:hover .i{
      	display: block;
      }
      .rlist li .i{
				margin-top: 5px;
				display: none;
				overflow: hidden;
      }
      .rlist li:hover .i{
				color: #00A1D6;
      }
      .rlist li .i b.pts{
      	background: 0;
      	padding: 0;
      }
      .rlist li .i b{
      	padding-left: 13px;
      	display: block;
      	font-family: "微软雅黑";
      	font-size: 12px;
      	line-height: 12px;
      	color: #99A2AA;
      	font-weight: normal;
      	height: 12px;
      	float: left;
      }
      em,i{
      	font-style: normal;
      }
      .list{
      	list-style-type: none;
      	padding: 0;
      	margin: 0;
      }
      .my-img{
      	width: 150px;
      	height: 110px;
      }
      .mtitle{
      	height: 40px;
      	padding: 0 10px;
      	line-height: 20px;
      	text-decoration: none;
      	display: block;
      	overflow: hidden;
      	margin-top: 6px;
      	font-size: 12px;
      	font-family: "微软雅黑";
      }
      .mtitle:hover{
      	color: #00a1d6;
      }
      .v-info{
      	padding-top: 3px;
      	font-size: 12px;
      	font-family: "微软雅黑";
      	color: #99A2AA;
      }
      .v-info-icon{
      	margin-left: 5px;
      	width:75px;
      	display: inline-block;
      }
      .v-info-uploader{
      	margin-top: 6px;
      }
      a:hover{
   		text-decoration: none !important;
   		color:#00a1d6 !important;
   	  }
    </style>
  </head>
  <body>
	  <!--
	    	作者：913092806@qq.com
	    	时间：2017-05-06
	    	描述：导航栏开始
	   -->
      		
		<div id="data-nav" class="navbar">
	  	<div class="data-fluid"></div>
	  	<div class="data-nav"></div>
			<div class="container">
		  	<div class="navbar-header">
		      <a class="navbar-brand" href="/hoyo/">
		      	<img src="/hoyo/img/logo.png" class="data-img"/>
		      	<span class="data-span">主页</span>
		      </a>
		    </div>
		
	      <ul id="contributor" class="nav navbar-nav navbar-right">
	      	<li th:if="${session.userInfo!=null}">
	      		<a class="data-user" href="/hoyo/user/personalCenter">
	      			<img th:src="${session.userInfo.icon}" class="data-img img-circle" />
	      			<span class="nav-user-name" th:text="${session.userInfo.nickname}">iscream</span>
	      		</a>
	      	</li>
	      	<li th:if="${session.user==null}">
	      		<a href="/hoyo/login">
	      			<span>登录</span>
	      		</a>
	      	</li>
	      	<li th:if="${session.user==null}">
	      		<a href="/hoyo/register" style="padding-right:84px;">
	      			<span>注册</span>
	      		</a>
	      	</li>
	      	
	        <li class="dropdown">
	          <a href="/hoyo/upload" class="dropdown-toggle data-color">投稿</a>
	      	</li>
	      </ul>
		  </div>
		</div>
      
	  <!-- 导航栏结束 -->
	  
	  <!--
      	作者：913092806@qq.com
      	时间：2017-05-07
      	描述：频道选择栏
      -->
	  <div id="data-channel-type" class="container">
	  	<div class="row navbar">
	  		<ul class="data-channel-type nav navbar-nav">
	  			<li>
	  				<a href="/hoyo/">
	  					<svg class="icon" aria-hidden="true">
	  						<use xlink:href="#icon-shouye_shouye"></use>
	  					</svg>
	  						<span class="data-right icon-font">首页</span>
	  				</a>
	  			</li>
	  			<li th:each="channel : ${channels}"><a th:href="'/hoyo/channel/'+ ${channel.id}"><span class="icon-font" th:text="${channel.channelName}"></span><span class="badge" th:text="${channel.movieCount}">42</span></a></li>
	  		</ul>
	  	</div>
	  </div>
	  
	  
	  <div class="container">
				<div class="row" id="catalog" style="display:none;">
	  				<div class="col-lg-9">
  						<div class="header row">
							<a th:href="'/hoyo/channel/'+ ${channelId}" th:class="${sortType==1} ? 'sort spanon':'sort' ">投稿时间排序</a>
							<a th:href="'/hoyo/channel/'+ ${channelId}+'?sortType=2'"  th:class="${sortType==2} ? 'sort spanon':'sort' ">视频热度排序</a>
  						</div>
  						
  						<div class="row">
 								<ul class="list">
 									<li v-for="catalog of catalogPage.list">
 									 	<div class="col-lg-2 data-md-5">
 									 		 <a :href="'/hoyo/catalog/'+catalog.id"  target="_blank" >
 									 		 		<img :src="catalog.catalogPoster" class="img-rounded my-img"/>
 									 		 </a>
 									 		 <a :href="'/hoyo/catalog/'+catalog.id" target="_blank" class="mtitle" :title="catalog.catalogName">
 									 		 		{{catalog.catalogName}}
 									 		 </a>
 									 		 <div class="v-info">
 									 		 		<span class="v-info-icon">
 									 		 			<svg class="icon" aria-hidden="true">
														  <use xlink:href="#icon-shipin3"></use>
														</svg>
														<span v-if="catalog.playAmount>=10000" >{{catalog.playAmount/100/100.0}}万</span>
 									 		 			<span v-else="catalog.playAmount<10000">{{catalog.playAmount}}</span>
 									 		 		</span>
 									 		 		<span class="v-info-icon">
 									 		 			<svg class="icon" aria-hidden="true">
														  <use xlink:href="#icon-danmuliang"></use>
														</svg>
														<span v-if="catalog.amount>=10000"  >{{catalog.amount/100/100.0}}万</span>
 									 		 			<span v-else="catalog.amount<10000" >{{catalog.amount}}</span>
 									 		 		</span>
 									 		 </div>
 									 	</div>
 									</li>
 								</ul>
  						</div>
	  					<div v-if="catalogPage.size>0" style="margin-right:-15px;margin-left:-15px;">
			  				<nav aria-label="Page navigation">
							<ul class="comment-bottom-page pagination">
							  <li v-if="!catalogPage.isFirstPage" v-on:click="getCatalogs(1)"><a style="cursor: pointer">首页</a></li>
							  <li v-if="catalogPage.hasPreviousPage" v-on:click="getCatalogs(catalogPage.pageNum-1)"><a style="cursor: pointer">上一页</a></li>
							  <li v-if="catalogPage.pages>1" v-for="pageNumber in catalogPage.navigatePageNums">
							  	<a v-if="catalogPage.pageNum!=pageNumber" v-on:click="getCatalogs(pageNumber)" style="cursor: pointer">{{pageNumber}}</a>
		  						<span v-if="catalogPage.pageNum==pageNumber">{{pageNumber}}</span>				  
							  </li>
							  <li v-if="catalogPage.hasNextPage" v-on:click="getCatalogs(catalogPage.pageNum+1)"><a style="cursor: pointer">下一页</a></li>
							  <li v-if="!catalogPage.isLastPage" v-on:click="getCatalogs(catalogPage.pages)"><a style="cursor: pointer">尾页</a></li>
							</ul>
							</nav>
			  			</div>	
			  						
	  				</div>
	  				<div class="col-lg-3">
	  						<div class="b-head">
	  							<span class="b-head-t">热门</span>
	  						</div>
	  						<div class="rlist-wrp">
	  							<ul class="rlist loaded">
	  								<li th:each="catalog,stat : ${catalogs}" th:class="${stat.first}? 'on' : '' ">
	  									<i th:class="${stat.count<=3}?'number n1':'number'"  th:text="${stat.count}">1</i>
	  									<div class="preview">
	  										<a th:href="'/hoyo/catalog/'+${catalog.id}" th:title="${catalog.catalogName}" target="_blank">
	  											<img th:src="${catalog.catalogPoster}" />
	  										</a>
	  									</div>
	  									<a class="rl-info" th:href="'/hoyo/catalog/'+${catalog.id}" th:title="${catalog.catalogName}" target="_blank">
	  										<div class="title t" th:text="${catalog.catalogName}">【4月】埃罗芒阿老师 07【独家正版】</div>
	  										<div class="i" th:if="${catalog.playAmount>10000}">
	  											<b class="pts" th:title="'综合评分:'+${catalog.playAmount/100/100.0}+'万'">
	  												综合评分<em th:text="${catalog.playAmount/100/100.0}+'万'">123.1万</em>
	  											</b>
	  										</div>
	  										<div class="i" th:unless="${catalog.playAmount>10000}">
	  											<b class="pts" th:title="'综合评分:'+${catalog.playAmount}">
	  												综合评分<em th:text="${catalog.playAmount}">123.1万</em>
	  											</b>
	  										</div>
	  									</a>
	  								</li>
	  							</ul>
	  						</div>
	  				</div>
				</div>
	  </div>
	  
	  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/hoyo/js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/hoyo/js/bootstrap.min.js"></script>
    <script src="/hoyo/js/iconfont.js"></script>
    <script src="/hoyo/js/vue1.0.26.js"></script>
    <script th:inline="javascript">
    	var channelId = [[${channelId}]];
    	var sortType = [[${sortType}]];
	    var catalogVM = new Vue({
			el: "#catalog",
			data: {
				catalogPage: {}
			},
			created: function(){
				this.catalogPage = [[${pages}]];
				$("#catalog").show();
			},
			methods:{
				getCatalogs: function(pageNum){
					var vm = this;
					var movieId = $("#movieId").val();
					$.get({
						url:"/hoyo/getCatalogs",
						data:"channelId="+channelId+"&pageNum="+pageNum+"&sortType="+sortType,
						success:function(data){
							var result = JSON.parse(data);
							if(result.success){
								catalogVM.catalogPage = result.pages;
								console.log(catalogVM.catalogPage);
								console.log(result.pages);
							}else{
								console.log("获取信息失败！");
							}
						}
					});
				}
			}
		});
    
    </script>
  </body>
</html>